﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Administrator/mpAdmin.master" AutoEventWireup="true" CodeFile="UserManager.aspx.cs" Inherits="Administrator_UserManager" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link href="../Script/zebraDialog/css/zebra_dialog.css" rel="stylesheet" />
    <script src="../Script/zebraDialog/javascript/zebra_dialog.js"></script>
    <style type="text/css">
        label, input
        {
            display: block;
        }

            input.text
            {
                margin-bottom: 12px;
                width: 95%;
                padding: .4em;
            }

        fieldset
        {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }

        h1
        {
            font-size: 1.2em;
            margin: .6em 0;
        }

        .ui-dialog .ui-state-error
        {
            padding: .3em;
        }

        .validateTips
        {
            border: 1px solid transparent;
            padding: 0.3em;
        }

        #loading
        {
            position: fixed;
            font-size: 12px;
            text-shadow: none;
            background: url("img/loadajax.gif") no-repeat scroll 50% 4px #000000;
            border-radius: 5px 5px 5px 5px;
            bottom: 20px;
            color: #FFFFFF;
            display: none;
            height: 100px;
            left: 50%;
            line-height: 166px;
            margin-left: -100px;
            opacity: 0.7;
            position: fixed;
            text-align: center;
            width: 200px;
        }
    </style>
    <div class="form-search">
        <input id="txtsearch" type="text" class="input-medium search-query" placeholder="Search input" />
        <input id="Text1" type="text" class="input-medium search-query" placeholder="Search input" style="display: none;" />
        <input id="btnsearch" type="button" class="btn btn-primary" value="Search" />
    </div>
    <div class="clr"></div>
    <div id="cont">
        <asp:Repeater runat="server" ID="rptUser">
            <HeaderTemplate>
                <table style="width:100%;">
                    <thead>
                        <th>User ID</th>
                        <th>Full Name</th>
                        <th>NickName</th>
                        <th>Sex</th>
                        <th>Email</th>
                        <th>Birthday</th>
                        <th>Url</th>
                        <th>Action</th>
                    </thead>
                    <tbody>
            </HeaderTemplate>
            <ItemTemplate>
                <tr id='tr<%#Eval("UserID") %>'>
                    <td class="center"><%#Eval("UserID") %></td>
                    <td><%#Eval("FullName") %></td>
                    <td><%#Eval("NickName") %></td>
                    <td><%#Eval("Sex") %></td>
                    <td><%#Eval("Email") %></td>
                    <td><%#Eval("Birthday") %></td>
                    <td><%#Eval("Url") %></td>

                    <td>
                        <div class="btn-group">
                            <a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">Action
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li id='e_<%#Eval("UserID") %>'><a onclick='Ajax_EditUser(<%#Eval("UserID") %>)' href="javascript:void(0);">Edit</a></li>
                                <li id='d_<%#Eval("UserID") %>'><a onclick='Ajax_DeleteUser(<%#Eval("UserID") %>);' href="javascript:void(0);">Delete</a></li>
                                <%--<li class="divider"></li>
                                <li>exit</li>--%>
                            </ul>
                        </div>
                    </td>

                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </tbody>
            </table>
            </FooterTemplate>
        </asp:Repeater>

    </div>
    <div id="divmore">Xem tiếp ...</div>
    <div id="loading">Đang tải dữ liệu ...</div>

    <div id="dialog-form" title="Edit a user">
        <p class="validateTips">All form fields are required.</p>
        <%--<form>
            <fieldset>--%>
        <label for="name">Full Name</label>
        <input type="text" name="name" id="fullname" class="text ui-widget-content ui-corner-all" />
        <label for="email">NickName</label>
        <input type="text" name="nickname" id="nickname" class="text ui-widget-content ui-corner-all" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" class="text ui-widget-content ui-corner-all" />
        <label for="email">Birthday</label>
        <input type="text" name="birthday" id="birthday" class="text ui-widget-content ui-corner-all" />
        <%-- </fieldset>
        </form>--%>
    </div>
    <script>
        $(function () {
            var start = 2;
            var PageSize = 15;
            var status = true;
            $(window).scroll(function () {
                if ($(this).scrollTop() / ($(document).height() - $(this).height()) > 0.95 && status == true) {
                    ProcessAjax();
                }
            });

            function ProcessAjax()
            {
                var param = "{PageNum:'" + start + "',PageSize:'" + PageSize + "'}";
                $.ajax({
                    type: "POST",
                    url: "ajax/AjaxPage.aspx/Ajax_GetMoreUser",
                    data: param,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    beforeSend: function () {
                        status = false;
                        $('#loading').show();
                    },
                    success: function (returnMsg) {
                        if (returnMsg.d) {
                            $('body tbody').append(returnMsg.d);
                        }
                    },
                    complete: function () {
                        status = true;
                        $('#loading').hide();
                        start += 1;
                    },
                    error: function () {
                        $.Zebra_Dialog('Có lỗi.');
                    }
                });
            }

            $('#divmore').click(function () {
                ProcessAjax();
            });
        });


        



        $('#txtsearch').keydown(function (e) {
            if (e.keyCode == 13) {


            }

        });

        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
            $('#birthday').datepicker({
                dateFormat: "dd/mm/yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "1960:+0"
            });
        });

        $(function () {
            var fullname = $("#fullname"),
            email = $("#email"),
            nickname = $('#nickname'),
            birthday = $('#birthday'),
            password = $('#password'),
            allFields = $([]).add(fullname).add(email).add(nickname).add(birthday).add(password),
            tips = $(".validateTips");
            function updateTips(t) {
                tips
                .text(t)
                .addClass("ui-state-highlight");
                setTimeout(function () {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }
            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");
                    updateTips("Length of " + n + " must be between " +
                    min + " and " + max + ".");
                    return false;
                } else {
                    return true;
                }
            }
            function checkRegexp(o, regexp, n) {
                if (!(regexp.test(o.val()))) {
                    o.addClass("ui-state-error");
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }
            $("#dialog-form").dialog({
                autoOpen: false,
                height: 500,
                width: 600,
                modal: true,
                buttons: {
                    "Save": function () {
                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        bValid = bValid && checkLength(fullname, "fullname", 3, 16);
                        bValid = bValid && checkLength(email, "email", 6, 80);
                        bValid = bValid && checkLength(password, "password", 5, 16);
                        bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");

                        bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. LeoPham@gmail.com");
                        bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
                        if (bValid) {
                            alert('good');
                            //$("#users tbody").append("<tr>" +
                            //"<td>" + name.val() + "</td>" +
                            //"<td>" + email.val() + "</td>" +
                            //"<td>" + password.val() + "</td>" +
                            //"</tr>");
                            //$(this).dialog("close");
                        }
                        else {
                            alert('bad');
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    //allFields.val("").removeClass("ui-state-error");
                }
            });
        });

        function Ajax_EditUser(UserID) {
            var param = "{UserID:'" + UserID + "'}";

            $.ajax({
                type: "POST",
                url: "ajax/AjaxPage.aspx/Ajax_GetInfoUser",
                data: param,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (returnMsg) {
                    eval(returnMsg.d);
                    $('#fullname').val(FullName);
                    $('#nickname').val(NickName);
                    $('#email').val(Email);
                    $('#birthday').val(Birthday);
                    $('#dialog-form').dialog("open");
                },
                error: function () {
                    $.Zebra_Dialog('Có lỗi.');
                }
            });
        }

        function Ajax_DeleteUser(UserID) {
            $.Zebra_Dialog('Bạn có chắc muốn xóa không?', {
                'type': 'warning',
                'title': 'Thông báo',
                'buttons': ['Cancel','OK'],
                'onClose': function (caption) {
                    if (caption == 'Cancel') {
                        return;
                    }
                    else {
                        Call_Delete(UserID);
                    }
                    //alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
                }
            });

            
        }
        function Call_Delete(UserID)
        {
            var param = "{UserID:'" + UserID + "'}";
            $.ajax({
                type: "POST",
                url: "ajax/AjaxPage.aspx/Ajax_DeleteUser",
                data: param,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend: function () {

                },
                success: function (returnMsg) {
                    eval(returnMsg.d);
                    if (ErrCode == 0) {
                        var id = '#tr' + UserID
                        $(id).hide('slow',function () { $(this).remove(); });
                    }

                },
                error: function () {
                    $.Zebra_Dialog('Có lỗi.');
                }
            });
        }
    </script>

</asp:Content>

